<template>
  <div class="FaultTrip">
    <!-- 上 -->
    <div class="conten_top">
      <div class="flexColumn">
        <!-- 头 -->
        <div class="Main_network_fault_tripping">
          <div>主网故障跳闸（今日）</div>
          <div class="cursor" @click="DisasterInformationStatistics">列表<i class="el-icon-d-arrow-right" color="#fff"></i>
          </div>
        </div>
        <!-- 图标区域 -->
        <div class="Main_network_fault_tripping_content">
          <div class="Main_network_fault_tripping_content_text">输电</div>
          <div id="zzt" style="width:100%; height: 99%">
            <!-- <BarCharts :option="option1" chartId="zwtzsd1" barChartsId="zwtzsd2" @barClick="barClickSd"></BarCharts> -->
            <BarCharts :option="option1" chartId="zwtzsd7" barChartsId="zwtzsd8">
            </BarCharts>
          </div>
        </div>
      </div>
      <div style="margin:0 16px;" class="flexColumn">
        <!-- 头 -->
        <div class="Main_network_fault_tripping">
          <div>主网故障跳闸（今日）</div>
          <div class="cursor" @click="DisasterInformationStatistics">列表<i class="el-icon-d-arrow-right" color="#fff"></i>
          </div>
        </div>
        <!-- 图标区域 -->
        <div class="Main_network_fault_tripping_content">
          <div class="Main_network_fault_tripping_content_text">变电</div>
          <div id="bbt" style="width:100%; height: 99%">
            <!-- <BarCharts :option="option2" chartId="zwtzsd3" barChartsId="zwtzsd4" @barClick="barClickBd"></BarCharts> -->
            <BarCharts :option="option2" chartId="zwtzsd9" barChartsId="zwtzsd10">
            </BarCharts>
          </div>
        </div>
      </div>
      <div class="flexColumn">
        <!-- 头 -->
        <div class="Main_network_fault_tripping">
          <div>台区及用户故障停电（今日）</div>
          <div class="cursor" @click="DisasterInformationStatistics">列表<i class="el-icon-d-arrow-right" color="#fff"></i>
          </div>
        </div>
        <!-- 图标区域 -->
        <div class="Main_network_fault_tripping_tq">
          <div class="Main_network_fault_tripping_tq_one">
            <div>台区</div>
            <div @click="numItemClick('tq')" style="cursor: pointer;">{{ datazs.tq }}</div>
          </div>
          <div class="Main_network_fault_tripping_tq_two">
            <div>重要用户</div>
            <div @click="numItemClick('zyyh')" style="cursor: pointer;">{{ datazs.zyyh }}</div>
          </div>
          <div class="Main_network_fault_tripping_tq_three">
            <div>普通用户</div>
            <div @click="numItemClick('ptyh')" style="cursor: pointer;">{{ datazs.ptyh }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="Distribution_network">
      <div>
        <!-- 头 -->
        <div class="Main_network_fault_tripping">
          <div>配网故障跳闸（今日）</div>
          <div class="cursor" @click="DisasterInformationStatistics">列表<i class="el-icon-d-arrow-right" color="#fff"></i>
          </div>
        </div>
        <!-- 图标区域 -->
        <div class="Main_network_fault_tripping_content">
          <!-- <div class="Main_network_fault_tripping_content_text">变电</div> -->
          <div id="tqyh" style="width:100%; height: 99%">
            <!-- <BarCharts :option="option3" chartId="zwtzsd5" barChartsId="zwtzsd6" @barClick="barClickPwgz"></BarCharts> -->
            <BarCharts :option="option3" chartId="zwtzsd11" barChartsId="zwtzsd12">
            </BarCharts>
          </div>
        </div>
      </div>
      <div style="margin-left: 16px;">
        <!-- 头 -->
        <div class="Main_network_fault_tripping">
          <div>预警通知单</div>
          <div class="cursor" @click="NoticeList">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
        </div>
        <!-- 图标区域 -->
        <div class="department backgroundColor NewEarlyWarn margin5-10  flexBetween padding10"
          v-for="(item, index) in noticeList.slice(0, 3)" :key="index" @click="goNoticeDetail(item.id)">
          <div style="width: 85%;">
            <a class=" LocalEW fontWeight">
              {{ item.warningNoticeName }}
            </a>
          </div>
          <div v-if="item.noticeState === '3'" style="color:#17FF66;fontSize:14px;width:60px">已发布</div>
          <div v-else-if="item.noticeState === '4'" style="color:#d9001b;fontSize:14px;width:60px">已解除</div>
          <div class="Levelbtn">
            <button class="borderYellow fontWeight"
              :style='{ color: colors[item.warningLvCode], borderColor: colors[item.warningLvCode] }'>
              {{ item.warningLvName }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 电站线路 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" width="60%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="500">
        <el-table-column prop="lineName" align="center" :label="firstTitle" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="120">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="center" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 用户 -->
    <el-dialog :title="yhdTitle" :visible.sync="yhdialogVisible" width="60%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="500">
        <el-table-column prop="lineName" align="center" :label="yhfirstTitle" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="客户等级" width="120">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="center" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listPage } from "@/api/EarlyWarningManagement/yjtzd";
import { getExtraScreenStatisticLoss, todayPDstatistics, getSubstationDetails } from "@/api/StstemHomepage";
import BarCharts from "@/components/highCharts/NewBarCharts";
// import { getHomePageInfoDetailList } from "@/api/EmergencyDisposal/zqbs.js";
export default {
  name: "FaultTrip",
  components: {
    BarCharts
  },
  data() {
    return {
      isShowCharts1: false,
      yhdialogVisible: false,
      showBarCharts: false,
      showBarCharts1: false,
      showBarCharts2: false,
      firstTitle: "停运输电线路名称",
      yhdTitle: "停电重要用户查看",
      yhfirstTitle: "停电重要用户",
      dialogTableVisible: false,
      dialogTitle: "",
      sssbData: {
        total: 0,
        pageNum: 0
      },
      tableData111: [],
      data0: [],
      data0s: [],
      data2: [0, 1, 2, 1],
      option1: {
        barWidth: 36, // 柱子宽度
        basePointX: 30,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 70,
          ch2: 30,
          ch3: 90
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["数量"],
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option2: {
        barWidth: 36, // 柱子宽度
        basePointX: 30,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 70,
          ch2: 30,
          ch3: 90
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["数量"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 25,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 60,
          ch2: 30,
          ch3: 100
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 24,
          bottom: 6,
          containLabel: true
        },
        legends: ["数量"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      xAxisData: [],
      xAxisData1: [],
      data1: [],
      xAxisDatas: [],
      noticeList: [],
      colors: {
        "1": "#02A7F0",
        "2": "#FFFF00",
        "3": "#F59A23",
        "4": "#D9001B"
      },
      datazs: {},
      getData: {
        startTime: "",
        endTime: ""
      }
    };
  },

  mounted() {
    // this.chart1 = this.$echarts.init(document.getElementById("zzt"));
    // this.chart2 = this.$echarts.init(document.getElementById("bbt"));
    // this.chart3 = this.$echarts.init(document.getElementById("tqyh"));
    // this.initCharts();
    // this.initChart();
    // this.initChar();
    this.getNoticeList();
    this.getExtraScreenStatisticLoss();
    this.todayPDstatistics();
  },
  methods: {
    // 主网故障跳闸（今日）
    getExtraScreenStatisticLoss() {
      var now = new Date();
      var year = now.getFullYear(); // 得到年份
      var month = now.getMonth();// 得到月份
      var date = now.getDate();// 得到日期
      var hour = now.getHours();// 得到小时
      var minu = now.getMinutes();// 得到分钟
      var sec = now.getSeconds();// 得到秒
      var MS = now.getMilliseconds();// 获取毫秒
      month = month + 1;
      if (month < 10) month = "0" + month;
      if (date < 10) date = "0" + date;
      if (hour < 10) hour = "0" + hour;
      if (minu < 10) minu = "0" + minu;
      if (sec < 10) sec = "0" + sec;
      if (MS < 100) MS = "0" + MS;
      this.getData.startTime = year + "-" + month + "-" + date + " " + "00:00:00";
      this.getData.endTime = year + "-" + month + "-" + date + "" + " " + hour + ":" + minu + ":" + sec + " ";
      getExtraScreenStatisticLoss({
        endTime: this.getData.endTime,
        startTime: this.getData.startTime
      }).then(res => {
        this.datazs = res;
        // 输电
        const sdMap = Object.entries(res.sdMap);
        this.data1 = [sdMap[0][1], sdMap[1][1], sdMap[2][1], sdMap[3][1]];
        this.xAxisData = [sdMap[0][0], sdMap[1][0], sdMap[2][0], sdMap[3][0]];
        this.option1.xAxis[0].data = [sdMap[0][0], sdMap[1][0], sdMap[2][0], sdMap[3][0]];
        this.data1.forEach((el, index) => {
          this.option1.series.push([el]);
          // this.option1.series.push([Math.ceil(Math.random() * 16)]);
        });
        this.showBarCharts = true;
        // 变电
        const bdMap = Object.entries(res.bdMap);
        this.data0s = [bdMap[0][1], bdMap[1][1], bdMap[2][1], bdMap[3][1]];
        this.xAxisData = [bdMap[0][0], bdMap[1][0], bdMap[2][0], bdMap[3][0]];
        this.option2.xAxis[0].data = [bdMap[0][0], bdMap[1][0], bdMap[2][0], bdMap[3][0]];
        this.data0s.forEach((el, index) => {
          this.option2.series.push([el]);
          // this.option2.series.push([Math.ceil(Math.random() * 16)]);
        });
        this.showBarCharts1 = true;
        // const sdMap = Object.entries(res.sdMap);
        // const bdMap = Object.entries(res.bdMap);
        // this.xAxisData = [sdMap[0][0], sdMap[1][0], sdMap[2][0], sdMap[3][0]];
        // this.data0 = [sdMap[0][1], sdMap[1][1], sdMap[2][1], sdMap[3][1]];
        // this.xAxisData1 = [bdMap[0][0], bdMap[1][0], bdMap[2][0], bdMap[3][0]];
        // this.data0s = [bdMap[0][1], bdMap[1][1], bdMap[2][1], bdMap[3][1]];
        // console.log(this.xAxisDatas1, this.data0s);
        // this.initCharts();
      });
    },
    // 配网故障跳闸（今日）
    todayPDstatistics() {
      todayPDstatistics().then(res => {
        this.data1 = res.map(item => {
          return item.total;
        });
        this.xAxisData = res.map(item => {
          return item.city;
        });
        this.option3.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option3.series.push([el]);
          // this.option3.series.push([Math.ceil(Math.random() * 16)]);
        });
        this.showBarCharts2 = true;
      });
    },
    numItemClick(key) {
      this.tableData111 = [];
      if (key === "zyyh") {
        this.yhdTitle = "停电重要用户查看";
        this.yhfirstTitle = "停电重要用户";
        this.yhdialogVisible = true;
      } else if (key === "ptyh") {
        this.yhdTitle = "停电普通用户查看";
        this.yhfirstTitle = "停电普通用户";
        this.yhdialogVisible = true;
      } else if (key === "tq") {
        this.dialogTitle = "停运台区查看";
        this.firstTitle = "停运台区名称";
        this.dialogTableVisible = true;
      }
      // this.dialogTableVisible = true;
    },
    barClickPwgz(i) {
      this.dialogTitle = "配网故障跳闸（今日)";
      this.firstTitle = "停运配电线路名称";
      this.getDialogData(i);
    },
    async getDialogData(i, name) {
      // const xList = ["500kV", "220kV", "110kV", "35kV"];
      // const parmas = {
      //   pageNum: 1,
      //   pageSize: 10,
      //   emergencyId: "132131311", // 应急事件id
      //   voltageClasses: xList[i - 1], // 	电压等级
      //   specialtyCode: "sdxl" // 线路编码
      // };
      let category = "";
      if (i === 1) {
        category = "sdxl";
      } else if (i === 2) {
        category = "pdxl";

      }
      const parmas = {
        startTime: this.getData.startTime,
        endTime: this.getData.endTime,
        category: category,
        voltageClasses: name
      };
      const res = await getSubstationDetails(parmas);
      this.sssbData.total = res.total;
      this.tableData111 = res.data;
      this.dialogTableVisible = true;
    },
    barClickBd(i, name) {
      this.dialogTitle = "主网故障跳闸（今日）- 变电";
      this.firstTitle = "停运变电站名称";
      this.getDialogData(i, name);
    },
    barClickSd(i, name) {
      console.log(i, "getSubstationDetailsgetSubstationDetails");
      this.dialogTitle = "主网故障跳闸（今日）- 输电";
      this.firstTitle = "停运输电线路名称";
      this.getDialogData(i, name);
    },
    initCharts() {
      const data1 = this.data0;
      const data11 = this.data0s;
      const datas = [data1];
      const datas11 = [data11];
      const obj = {};
      const obj11 = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      datas11.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj11[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #D5798B;border-radius: 50%;margin-right: 10px'></div>输电: ${finishedCount}</div>`;
            }
          },
          // legend: {
          //   itemGap: 7, // 图例之间的间隔
          //   selectedMode: false, // 是否可选择图例
          //   right: "-10%",
          //   bottom: "0",
          //   itemWidth: 12,
          //   itemHeight: 12,
          //   formatter: (name) => `{a|${name}} `,
          //   textStyle: {
          //     align: "left",
          //     backgroundColor: "transparent",
          //     color: "#fff",
          //     fontSize: 12,
          //     rich: {
          //       a: {
          //         width: 55,
          //         fontSize: 14,
          //         lineHeight: 14
          //       }
          //     }
          //   }
          // },
          grid: {
            top: "25%",
            right: "0%",
            bottom: "17%",
            left: "12%"
          },
          xAxis: {
            data: this.xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;// 一行显示几个字 然后就超过字数就会自动换行
                if ((paramsNameNumber / 6) > 6) {
                  provideNumber = 6;
                }
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              name: "单位:（个）",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: ["#666"],
                  type: "dashed"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "输电",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#e10241"
                    },
                    {
                      offset: 1,
                      color: "#fca0be"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#fca0be"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#e10241"
                      },
                      {
                        offset: 1,
                        color: "#fca0be"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      this.chart1.on("click", (params) => {
        // console.log(params.dataIndex);
        console.log(params, "paramsparams");
        this.barClickSd(1, params.name);
      });
      this.chart2.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data11[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #D5798B;border-radius: 50%;margin-right: 10px'></div>变电: ${finishedCount}</div>`;
            }
          },
          // legend: {
          //   itemGap: 7, // 图例之间的间隔
          //   selectedMode: false, // 是否可选择图例
          //   right: "-10%",
          //   bottom: "0",
          //   itemWidth: 12,
          //   itemHeight: 12,
          //   formatter: (name) => `{a|${name}} `,
          //   textStyle: {
          //     align: "left",
          //     backgroundColor: "transparent",
          //     color: "#fff",
          //     fontSize: 12,
          //     rich: {
          //       a: {
          //         width: 55,
          //         fontSize: 14,
          //         lineHeight: 14
          //       }
          //     }
          //   }
          // },
          grid: {
            top: "25%",
            right: "0%",
            bottom: "17%",
            left: "12%"
          },
          xAxis: {
            data: this.xAxisData1,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;// 一行显示几个字 然后就超过字数就会自动换行
                if ((paramsNameNumber / 6) > 6) {
                  provideNumber = 6;
                }
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              name: "单位:（个）",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: ["#666"],
                  type: "dashed"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "变电",
              data: datas11[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#e10241"
                    },
                    {
                      offset: 1,
                      color: "#fca0be"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#fca0be"
                }
              }
            },
            {
              data: obj11.data11,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#e10241"
                      },
                      {
                        offset: 1,
                        color: "#fca0be"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      this.chart2.on("click", (params) => {
        this.barClickBd(2, params.name);
      });
    },
    initChar() {
      const data1 = this.data2;
      const datas = [data1];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart2.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #D5798B;border-radius: 50%;margin-right: 10px'></div>变电: ${finishedCount}</div>`;
            }
          },
          // legend: {
          //   itemGap: 7, // 图例之间的间隔
          //   selectedMode: false, // 是否可选择图例
          //   right: "-10%",
          //   bottom: "0",
          //   itemWidth: 12,
          //   itemHeight: 12,
          //   formatter: (name) => `{a|${name}} `,
          //   textStyle: {
          //     align: "left",
          //     backgroundColor: "transparent",
          //     color: "#fff",
          //     fontSize: 12,
          //     rich: {
          //       a: {
          //         width: 55,
          //         fontSize: 14,
          //         lineHeight: 14
          //       }
          //     }
          //   }
          // },
          grid: {
            top: "25%",
            right: "0%",
            bottom: "17%",
            left: "12%"
          },
          xAxis: {
            data: this.xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;// 一行显示几个字 然后就超过字数就会自动换行
                if ((paramsNameNumber / 6) > 6) {
                  provideNumber = 6;
                }
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              name: "单位:（个）",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: ["#666"],
                  type: "dashed"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "变电",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#e10241"
                    },
                    {
                      offset: 1,
                      color: "#fca0be"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#fca0be"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#e10241"
                      },
                      {
                        offset: 1,
                        color: "#fca0be"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
    },
    initChart() {
      const data1 = this.data1;
      const datas = [data1];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart3.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #D5798B;border-radius: 50%;margin-right: 10px'></div>配电线路: ${finishedCount}</div>`;
            }
          },
          // legend: {
          //   itemGap: 7, // 图例之间的间隔
          //   selectedMode: false, // 是否可选择图例
          //   right: "-10%",
          //   bottom: "0",
          //   itemWidth: 12,
          //   itemHeight: 12,
          //   formatter: (name) => `{a|${name}} `,
          //   textStyle: {
          //     align: "left",
          //     backgroundColor: "transparent",
          //     color: "#fff",
          //     fontSize: 12,
          //     rich: {
          //       a: {
          //         width: 55,
          //         fontSize: 14,
          //         lineHeight: 14
          //       }
          //     }
          //   }
          // },
          grid: {
            top: "25%",
            right: "0%",
            bottom: "12%",
            left: "10%"
          },
          xAxis: {
            data: this.xAxisDatas,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              name: "单位:（个）",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: ["#666"],
                  type: "dashed"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "配电线路",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#e10241"
                    },
                    {
                      offset: 1,
                      color: "#fca0be"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#fca0be"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#e10241"
                      },
                      {
                        offset: 1,
                        color: "#fca0be"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      this.chart3.on("click", (params) => {
        this.barClickPwgz(params.dataIndex);
      });
    },
    // 预警通知单
    getNoticeList() {
      // 后端约定sort字段传默认值排序
      listPage({ sort: "1", type: "sy" }).then(res => {
        this.noticeList = res.data;
      });
    },
    goNoticeDetail(id) {
      this.$router.push({
        name: "NoticeDetail",
        query: {
          id: id
        }
      });
      this.$store.commit("SET_MenuIndex", "3");
    },
    DisasterInformationStatistics() {
      this.$store.commit("SET_MenuIndex", "4");
      this.$router.push({
        name: "DisasterInformationStatistics"
      });
    },
    NoticeList() {
      this.$store.commit("SET_MenuIndex", "3");
      this.$router.push({
        name: "NoticeList"
      });
    }
  }
};
</script>

<style scoped lang="less">
.overflowY {
  height: 85%;
  overflow-y: auto;
}

.cursor {
  cursor: pointer;
}

.department.NewEarlyWarn .Levelbtn {
  width: 20% !important;
}

.department.NewEarlyWarn {
  height: 20%;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    border: 2px solid rgb(0, 144, 255);
    padding: 8px;
  }

  .LocalEW {
    width: 80%;
    font-size: 14px;
    color: #008dff;
    margin-bottom: 2px;
  }

  .Levelbtn {
    width: 15%;
    text-align: center;
  }
}

.FaultTrip {
  height: 100%;
  display: flex;
  flex-direction: column;

  .conten_top {
    height: 46%;
    display: flex;

    >div {
      flex: 1;
      border: 1px solid #174ab4;
      height: 100%;
      border-radius: 3px;

      .Main_network_fault_tripping {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        background-color: #174ab4;
        text-align: center;
        align-items: center;
        color: #fff;
      }
    }
  }

  .Distribution_network {
    flex: 1;
    display: flex;
    margin-top: 16px;

    >div {
      flex: 1;
      border: 1px solid #174ab4;
      height: 100%;
      border-radius: 3px;
      display: flex;
      flex-direction: column;

      .Main_network_fault_tripping {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        background-color: #174ab4;
        text-align: center;
        align-items: center;
        color: #fff;
      }
    }
  }
}

.Main_network_fault_tripping_content {
  width: 100%;
  flex: 1;
  position: relative;

  .Main_network_fault_tripping_content_text {
    position: absolute;
    top: 10px;
    right: 120px;
    font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #d5f0ff;
    text-align: center;
  }
}

.Main_network_fault_tripping_tq {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .Main_network_fault_tripping_tq_one {
    width: 92%;
    height: 25%;
    margin: 0 auto;
    background-color: #5682aa;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >div {
      padding: 0 15px;
      font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #13adef;
    }
  }

  .Main_network_fault_tripping_tq_two {
    width: 92%;
    height: 25%;
    margin: 0 auto;
    background-color: #72787e;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >div {
      padding: 0 15px;
      font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #f59a23;
    }
  }

  .Main_network_fault_tripping_tq_three {
    width: 92%;
    height: 25%;
    margin: 0 auto;
    background-color: #3d55a9;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >div {
      padding: 0 15px;
      font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #8080ff;
    }
  }
}

.yujing_name {
  display: flex;
}

:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}

:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}

:deep(div::-webkit-scrollbar) {
  width: 5px;
}

:deep(::-webkit-scrollbar-corner) {
  background: transparent;
}

:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

.flexColumn {
  display: flex;
  flex-direction: column;
}
</style>
